<template>
    <div v-loading="loading">
        <el-form label-width="120px" :model="code" :rules="rules" ref="codeForm" @submit.native.prevent>
            <el-form-item label="主体资料" prop="input">
                <el-input placeholder="输入邮箱地址" v-model="code.input">
                    <el-button slot="append"
                               type="primary"
                               :loading="code.wait !== 0 && !code.loading"
                               @click="sendCode">
                        <template v-if="code.wait > 0">{{code.wait}}秒后重新获取</template>
                        <template v-else>获取验证码</template>
                    </el-button>
                </el-input>
                验证码有效期：10分钟。
                持有有效验证码请直接填入到下一个输入框，无需再次获取验证码。
            </el-form-item>
        </el-form>
        <el-form label-width="120px" :model="form" :rules="rules" ref="resetPasswordForm">
            <el-form-item label="验证码" :rules="[{required:true,trigger:'blur'}]" prop="code">
                <el-input placeholder="输入验证码" v-model="form.code"/>
            </el-form-item>
            <el-form-item label="新密码" prop="password">
                <el-input placeholder="输入新密码" v-model="form.password"/>
            </el-form-item>
            <el-form-item label="确认新密码" prop="checkPassword">
                <el-input placeholder="确认新密码" v-model="form.checkPassword"/>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submit">重置密码</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    let geetest;
    export default {
        name: "reset-password",
        data() {
            const notEmpty = (message) => {
                return (rule, value, callback) => {
                    if (!value || value.length < 4)
                        return callback(new Error(message));
                    callback();
                };
            };
            return {
                loading: true,
                code: {input: '', loading: false, wait: 0,},
                form: {code: '', password: '', checkPassword: ''},
                rules: {
                    input: {
                        required: true, validator: notEmpty('请填入邮箱地址'), trigger: 'blur'
                    },
                    code: {
                        required: true, validator: notEmpty('请填入收到的验证码'), trigger: 'blur'
                    },
                    password: {
                        required: true,
                        validator: (rule, value, callback) => {
                            if (value.length < 6)
                                return callback(new Error('密码需要6位以上长度的字符组成'));
                            callback();
                        }, trigger: 'blur'
                    },
                    checkPassword: {
                        required: true,
                        validator: (rule, value, callback) => {
                            if (value !== this.form.password)
                                return callback(new Error('密码需要6位以上长度的字符组成'));
                            callback();
                        }, trigger: 'blur'
                    },
                }
            }
        },
        methods: {
            csrf() {
                return document.cookie.match(/csrftoken=([\S]+)/i)[1];
            },
            active() {
                this.loading = true;
                this.$http.get('/api/account/get-geetest-data').then(res => {
                    this.loading = false;
                    const data = res.data;
                    initGeetest({
                        // 以下配置参数来自服务端 SDK
                        gt: data.gt,
                        challenge: data.challenge,
                        offline: !data.success,
                        new_captcha: data.new_captcha,
                        product: 'bind',
                    }, (captchaObj) => {
                        // 这里可以调用验证实例 captchaObj 的实例方法
                        geetest = captchaObj;
                        geetest.onSuccess(() => {
                            const result = geetest.getValidate();
                            this.$http.post('/api/account/send-code', {
                                input: this.code.input,
                                geetest: result,
                                _csrf: this.csrf(),
                            }).then(res => {
                                this.code.loading = false;
                                this.code.wait = 60;
                                this.countDown();
                                this.$message.success('成功发送验证码，请到邮箱查收');
                            }).catch(err => {
                                this.code.loading = false;
                                this.$alert(err.response.data);
                            });
                        });
                    })
                });
            },
            sendCode() {
                this.code.loading = true;
                this.$refs['codeForm'].validate(valid => {
                    if (!valid) return;
                    geetest.verify();
                });
            },
            submit() {
                this.$refs['resetPasswordForm'].validate(valid => {
                    if (!valid) return;
                    const form = Object.assign({}, {_csrf: this.csrf(),}, this.form);
                    this.$http.post('/api/account/reset-password', form).then(res => {
                        this.activeName = 'login';
                        this.$alert('成功重置密码');
                    }).catch(err => {
                        this.$alert(err.response.data);
                    });
                });
            },
            countDown() {
                if (this.code.wait > 0)
                    setTimeout(() => {
                        this.code.wait--;
                        this.countDown();
                    }, 1000);
            },
        },
    }
</script>

<style scoped>

</style>